<template>
  <el-card style="margin-top: 20px">
    <template #header>
      <div class="card-header">
        <!-- <img src="../../assets/logo.png" style="width: 50px; height: 50px" /> -->
        <span>资源信息列表</span>
      </div>
    </template>
    <el-row :gutter="10">
     <el-input
          placeholder="请输入资源名称"
          style="width: 150px;margin-right:10px;"
          v-model="searchContent" 
        ></el-input
      > 
      
        <el-button type="primary"  size="mini"  @click="handlerSearch">搜索</el-button>
        <el-button type="primary"  size="mini" @click="showAddMenuDialog">添加</el-button>
       
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="url" label="权限控制url" />
      <el-table-column prop="path" label="文件路径" />
      <el-table-column prop="component" label="组件名称" />
      <el-table-column prop="name" label="资源名称" />
      <el-table-column prop="iconCls" label="资源图标">
        <template #default="scope">
          <i
            :class="scope.row.iconCls ? scope.row.iconCls : 'el-icon-setting'"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="parentId" label="父组件" />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right; margin-top: 10px"
      :currentPage="currentPage"
      :page-size="10"
      :page-sizes="[10, 20, 100, 500]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>
  <MenuAdd
    :centerDialogVisible="centerDialogVisible"
    @onCloseDialog="closeDialogVisible()"
  ></MenuAdd>
  <MenuEdit
    v-if="editDialogVisible === true"
    ref="menuedit"
    :menuId="id"
    :editDialogVisible="editDialogVisible"
    @onEditCloseDialog="closeEditDialogVisible"
  ></MenuEdit>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import MenuAdd from "../../components/sys/menu/MenuAdd.vue";
import MenuEdit from "../../components/sys/menu/MenuEdit.vue";

import {
  useHandlerEdit,
  useHandleSizeChange,
  useHandleCurrentChange,
  useHandlerSearch,
  useDelete,
  loadData
} from "../../utils/api";

export default {
  name: "SysConfig",
  components: {
    MenuAdd,
    MenuEdit,
  },
  setup() {
    const baseUrl = "/system/cfg/list";
    const state = reactive({
      searchContent: "",
      tableData: [],
      centerDialogVisible: false,
      editDialogVisible: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      id: "",
      baseUrl,
      menuName: "",
    });

    onMounted(() => {
      loadData(state, state.baseUrl);
    });

    const showAddMenuDialog = () => {
      state.centerDialogVisible = true;
    };

    const closeDialogVisible = (visible, data) => {
      state.centerDialogVisible = false;
      loadData(state, state.baseUrl);
    };

    const closeEditDialogVisible = (visible, data) => {
      state.editDialogVisible = visible;

      if (data !== undefined) {
        loadData(state, state.baseUrl);
      }
    };
    const currentChange = (pageNo) => {
      state.currentPage = pageNo;
      loadData(state, state.baseUrl);
    };
    return {
      state,
      ...toRefs(state), //解构响应式数据
      ...useDelete(state, baseUrl),
      ...useHandlerSearch(state, baseUrl),
      ...useHandlerEdit(state),
      ...useHandleSizeChange(state, baseUrl),
      ...useHandleCurrentChange(state, baseUrl),
      showAddMenuDialog,
      closeDialogVisible,
      closeEditDialogVisible,
      currentChange

    };
  },
};
</script>